<template>
  <div>
    <div class="box">
      <h1>{{str}}</h1>
    </div>
    <div>猫咪老师的信息：</div>
    <div>姓名：{{obj.name}}</div>
    <div>年龄：{{obj.age}}</div>
    <div>是否成年：{{obj.age >= 18 ? "成年":"未成年"}}</div>

    <!-- 1、使用数据在 data 中必须存在，属性名一定要写正确 -->
    <!-- <div>{{ str1 }}</div> -->
    
    <!-- 2、能使用表达式，不能使用语句 -->
    <!-- <div>{{ if(obj.age >= 18) }}</div> -->

    <!-- 3、插值表达式不能用于标签属性 -->
  </div>
</template>


<script>
export default {
  data() {
    return {
      str: 'hi',
      obj: {
        name: '猫咪老师',
        age: 3,
      },
    }
  },
}
</script>


<style lang="less">
.box {
  width: 200px;
  height: 100px;
  background-color: green;
  h1 {
    color: #333;
  }
}
</style>